import React, { PureComponent } from 'react';
 
import { Table, Tag } from 'antd'; 
import { Resizable } from 'react-resizable';

import styles from './index.css';

/**
 * 检索:数据表格
 */
export class Index extends PureComponent {

  columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
    },
    {
      title: '角色权限',
      dataIndex: 'rolepermissions',
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
    },
    {
      title: '创建人',
      dataIndex: 'Founder',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => {
        return (
          <>
            <Tag color={'blue'} style={ { cursor: 'pointer' } } onClick={ () => { this.editTagClickedHandler(record) } }> 编辑 </Tag>
            <Tag color={'blue'} style={ { cursor: 'pointer' } } onClick={ () => { this.associatedUsersTagClickedHandler(record) } }> 关联用户 </Tag>
          </>
        )
      }
    },
  ];

  render() {
    // const { total, list, page, limit } = this.props.state;
    const list = [
      {
        id:'1',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'2',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'3',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'4',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'5',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'11',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'6',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'7',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'8',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'9',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'10',
        rolepermissions: '角色权限',
        Founder:'创建人',
        gmtCreate:'2020-09-20 12:00:00',
      },
    ];
    const page = 1;
    const limit = 10;

    return (
      <div className={styles.data_table}>
        {/* 数据表单 */}
        <Table
          rowKey="id"
          scroll={{
            x: true
          }}
          rowSelection={{
            onChange: this.tableRowSelectionChangedHandler
          }}
          columns={this.columns} 
          dataSource={list}
          pagination={{
            position: 'bottom',
            total: list.length,
            showTotal: (total, range) => `共${total}条数据`,
            itemRender: (page, type, originalElement) => {
              if (type === 'prev') {
                return <button className={styles.prev_btn}>上一页</button>;
              }
              if (type === 'next') {
                return <button className={styles.prev_btn}>下一页</button>;
              }
              return originalElement;
            },
            current: page,
            defaultCurrent: 1,
            defaultPageSize: limit,
            onChange: this.pageChangedHandler,
            showSizeChanger: true,
            onShowSizeChange: this.pageSizeChangedHandler,
            showQuickJumper: true,
            hideOnSinglePage: false,
          }}
        />
      </div>
    )
  }

  
  /**
   * 编辑标签点击事件
   */
 editTagClickedHandler = (record) => {
  !!this.props.onEdit && this.props.onEdit(record);
 }

  /**
   * 关联用户标签点击事件
   */
  associatedUsersTagClickedHandler = (record) => {
    !!this.props.onAssociatedUsers && this.props.onAssociatedUsers(record);
  }

  /**
   * 页数被改变时
   * page：当前页数
   * pageSize：改变后的每页记录数
   */
  pageChangedHandler = (page, pageSize) => {
    const { onPageChange } = this.props;
    !!onPageChange && onPageChange(page, pageSize);
  }

  /**
   * 每页显示记录数被改变时
   * page：当前页数
   * pageSize：改变后的每页记录数
   */
  pageSizeChangedHandler = (page, pageSize) => {
    const { onPageSizeChange } = this.props;
    !!onPageSizeChange && onPageSizeChange(page, pageSize);
  }
}

export default Index;
